<template>
  <!-- 个人中心 -->
  <view class="center">
    <!-- 头部 -->
    <view class="header">
      <view class="avatar">
        <image
          class="img"
          v-if="!info.token"
          src="../../static/images/default_avatar.png"
        ></image>
        <open-data class="img" v-else type="userAvatarUrl"></open-data>
      </view>
      <view class="header_content">
        <view class="nickname">
          <open-data v-if="info.token" type="userNickName"></open-data>
          <text v-else>Hi~欢迎来到运呗购票</text>
        </view>
        <view class="bottom">
          <button
            class="btn"
            open-type="getPhoneNumber"
            type="primary"
            v-if="!info.token"
            @getphonenumber="getPhoneNumber"
          >
            授权登录
          </button>
          <view class="desc" v-if="info.token">祝您拥有愉快的旅程~</view>
        </view>
      </view>
    </view>
    <!-- 菜单 -->
    <view class="entrance">
      <view
        class="item"
        v-for="item in entrances"
        :key="item.name"
        @click="menuTo(item)"
      >
        <image class="img" :src="item.img"></image>
        <view class="name">{{ item.name }}</view>
      </view>
    </view>
    <!-- 菜单列表 -->
    <view class="menu">
      <view
        class="item"
        hover-class="hover"
        v-for="item in menus"
        :key="item.name"
        @click="menuTo(item)"
      >
        <view class="img_wraper"
          ><image class="img" :src="item.img"></image
        ></view>
        <view class="name">{{ item.name }}</view>
        <view class="desc">{{ item.desc }}</view>
        <button
          v-if="item.type == 'customer'"
          class="customer_btn"
          open-type="contact"
          bindcontact="handleContact"
          show-message-card="true"
        ></button>
        <view class="icon"
          ><uni-icons type="arrowright" size="20" color="#333333"></uni-icons
        ></view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
// components
import uniIcons from "@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue";
// api
import { $login } from "../../service/index";
// utils
import { myShowToast, myShowModal } from "../../utils/utils.js";
export default {
  components: { uniIcons },
  data() {
    return {
      webviewStyles: {
        progress: {
          color: "#FF3333",
        },
      },
      entrances: [
        {
          type: "orderAll",
          name: "全部订单",
          img: "../../static/images/entrance1.png",
          path: "/pages/order/order",
        },
        {
          type: "orderPending",
          name: "待付款",
          img: "../../static/images/entrance2.png",
          path: "/pages/order/order",
        },
        {
          type: "orderNotTravel",
          name: "未出行",
          img: "../../static/images/entrance3.png",
          path: "/pages/order/order",
        },
      ], // 入口列表
      menus: [
        {
          type: "commonPassengers",
          name: "常用乘客",
          img: "../../static/images/menu_ck.png",
          path: "/center/passengerList/passengerList",
          desc: "乘客管理",
        },
        {
          type: "phone",
          name: "手机号码",
          img: "../../static/images/menu_sj.png",
          path: "/center/modifyPhone/modifyPhone",
          desc: "修改手机号码",
        },
        {
          type: "help",
          name: "帮助中心",
          img: "../../static/images/menu_bz.png",
          path: "/pages/order/order",
          desc: "",
        },
        {
          type: "customer",
          name: "我的客服",
          img: "../../static/images/menu_kf.png",
          path: "/pages/order/order",
          desc: "",
        },
      ], // 菜单列表
      wxCode: "", // 微信code
    };
  },
  computed: mapState(["info", "orderType"]),
  methods: {
    ...mapMutations(["cancelRequest", "updateOrderType", "updateInfo"]),
    // 登录
    login(e) {
      let appid = uni.getAccountInfoSync().miniProgram.appId;
      const params = {
        encryptedData: e.encryptedData,
        iv: e.iv,
        wxCode: this.wxCode,
        appid,
      };
      $login(params)
        .then((res) => {
          const data = res.data;
          if (!data.success) {
            myShowModal(data.message || "网络错误");
            return;
          }
          this.updateInfo({
            token: data.content.token,
            phone: data.content.phone,
          });
          uni.$emit("hasLogin", { hasLogin: true });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 授权登录
    getPhoneNumber(e) {
      // 检查登录态
      uni.checkSession({
        success: (res) => {
          console.log("checkSession", res);
          // 成功 则用code 和 iv encryptedData 调登录接口
          if (e.detail.encryptedData && e.detail.iv) {
            this.login(e.detail);
          } else {
            myShowToast("授权登录失败,请稍后重试");
          }
        },
        fail: (err) => {
          console.log("checkSession", err);
          myShowToast("授权登录失败,请稍后重试");
          // 失败 则重新获取微信code
          this.loginCode();
        },
      });
    },
    // 点击页面各个入口
    menuTo(item) {
      switch (item.type) {
        case "orderAll":
        case "orderPending":
        case "orderNotTravel":
          this.updateOrderType(item.type);
          uni.switchTab({
            url: item.path,
          });

          break;
        case "commonPassengers":
        case "phone":
          if (!this.info.token) {
            myShowToast("请先登录");
            return;
          }
          uni.navigateTo({ url: item.path });
          break;
        case "help":
          myShowToast("暂未开放该功能~");
          break;
        case "customer":
          return;
          break;
        default:
          myShowToast("错误的功能类型");
          break;
      }
    },
    // 我的客服
    handleContact(e) {
      console.log(e.detail.path);
      console.log(e.detail.query);
    },
    // login
    loginCode() {
      // 获取wx_code
      uni.login({
        success: (res) => {
          if (res.code) {
            console.log(res.code);
            this.wxCode = res.code;
          } else {
            console.log("登录失败！" + res.errMsg);
          }
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
  },
  onLoad() {
    // 获取wx_code
    // uni.login({
    // 	success: res => {
    // 		if (res.code) {
    // 			console.log(res.code);
    // 			this.wxCode = res.code;
    // 		} else {
    // 			console.log('登录失败！' + res.errMsg);
    // 		}
    // 	},
    // 	fail: err => {
    // 		console.log(err);
    // 	}
    // });
  },
  onShow() {
    //切换页面重置订单查询状态
    this.updateOrderType("orderAll");
    !this.info.token && this.loginCode();
  },
};
</script>

<style lang="scss" scoped>
.center {
  background-color: #ffffff;
  min-height: 100%;
  .header {
    width: 100%;
    height: 272rpx;
    // background: url(https://img.lcsw.cn/miniapp/assets/headerBg.png) no-repeat 0 0;
    // background-size: cover;
    .avatar {
      display: inline-block;
      margin: 51rpx 22rpx 0 40rpx;
      width: 148rpx;
      height: 148rpx;
      background-color: #fff;
      border: 4rpx solid rgba(255, 255, 255, 1);
      box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(230, 235, 244, 1);
      border-radius: 50%;
      overflow: hidden;
      .img {
        width: 148rpx;
        height: 148rpx;
      }
    }
    .header_content {
      display: inline-block;
      height: 148rpx;
      overflow: hidden;
      .nickname {
        font-size: 32rpx;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        padding: 18rpx 0 28rpx 0;
      }
      .bottom {
        .btn {
          margin: 0;
          padding: 0;
          width: 148rpx;
          height: 56rpx;
          font-size: 24rpx;
          line-height: 56rpx;
          box-shadow: none;
          background: linear-gradient(
            90deg,
            rgba(34, 100, 255, 1) 0%,
            rgba(52, 113, 255, 1) 99%
          );
          border-radius: 28px;
        }
        .desc {
          font-size: 24rpx;
          // line-height:56rpx;
          font-weight: 500;
          color: rgba(139, 150, 172, 1);
        }
      }
    }
  }
  .entrance {
    display: flex;
    justify-content: space-around;
    padding-bottom: 34rpx;
    border-bottom: 20rpx solid #f8faff;
    .item {
      text-align: center;
      .img {
        width: 68rpx;
        height: 68rpx;
      }
      .name {
        font-size: 28rpx;
        font-weight: 700;
        color: rgba(51, 51, 51, 1);
      }
    }
  }
  .menu {
    padding: 0 40rpx;
    .item {
      display: flex;
      justify-content: flex-start;
      border-bottom: 1px solid #e6ebf4;
      height: 114rpx;
      line-height: 140rpx;
      position: relative;
      .img_wraper {
        margin-right: 27rpx;
        .img {
          width: 32rpx;
          height: 32rpx;
        }
      }
      .name {
        line-height: 136rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
      .customer_btn {
        position: absolute;
        width: 100%;
        height: 114rpx;
        display: block;
        margin: 0;
        padding: 0;
        box-sizing: none;
        font-size: 28rpx;
        text-align: center;
        text-decoration: none;
        line-height: 136rpx;
        border-radius: 0;
        -webkit-tap-highlight-color: transparent;
        overflow: hidden;
        color: rgba(51, 51, 51, 1);
        background-color: transparent;
        border: none;
      }
      .customer_btn::after {
        content: " ";
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        left: 0;
        border: none;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        box-sizing: border-box;
        border-radius: 0;
      }
      .desc {
        width: 400rpx;
        text-align: right;
        line-height: 136rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: rgba(139, 150, 172, 1);
      }
      .icon {
        position: absolute;
        right: -10rpx;
      }
    }
  }
}
</style>
